<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { regYuanToFen, timeFormat, timeFormat_2, toYuan, getNowDay } from '@/hooks/util'
import * as accountApi from '@/api/account'
import * as fishApi from '@/api/fishGoods'
import { message } from 'ant-design-vue'
import SetGroup from './components/SetGroup.vue'
import AddNewProModal from './components/AddNewProModal.vue'
import EditNewProModal from './components/EditNewProModal.vue'
import BatchEditPrice from './components/BatchEditPrice.vue'
import GroupList from './components/GroupList.vue'
import * as fishGoodsApi from '../../../api/fishGoods'
import SearchDrawer from '@/components/search-drawer/Index.vue'

const searchDrawerRef = ref()

const route = useRoute()
const router = useRouter()
const addNewProModalRef = ref()
const EditNewProModalRef = ref()
const batchEditPriceRef = ref()
const setGroupRef = ref()
const groupListRef = ref()

const handlePageChange = (page, pageSize) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}
interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  showQuickJumper: boolean
}
let okRobat = ref<string>()

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  robotId?: string | number
  status?: string | number
  groupId?: string | number
  title?: string | undefined
  sellingPriceBegin?: string | number
  sellingPriceCease?: string | number
  originalPriceBegin?: string | number
  originalPriceCease?: string | number
  salesCountSwitch?: boolean
  inventorySwitch?: boolean
  createTimeSwitch?: boolean
  exposureCountSwitch?: boolean
  wantCountSwitch?: boolean
  browseCountSwitch?: boolean
  order?: boolean | number
}

interface SelectProps {
  value: string
  label: string
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
  // robotId: okRobat.value,
})

const dataSource = ref([])
const columns = [
  {
    title: '宝贝图片',
    key: 'imgList',
    width: 120,
    align: 'center',
  },
  {
    title: '宝贝信息',
    key: 'title',
    width: 400,
  },
  {
    title: '热度',
    key: 'exposure',
    width: 200,
  },
  {
    title: '行业信息',
    key: 'channelId',
    width: 400,
  },
  {
    title: '价格信息',
    key: 'originalPrice',
    width: 300,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
    align: 'center',
  },
  // {
  //   title: '创建/过期时间',
  //   key: 'createTime',
  //   width: 180,
  // },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await accountApi.getFishRobotList({
      currentPage: 1,
      pageSize: 100,
    })
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })
      optionList.value.unshift({
        label: '全部',
        value: '1',
      })

      if (data.list.length == 0) {
        message.error('无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(optionList.value[0].value)
        data.list.forEach((item: any) => {
          yzDataList.value.push({
            id: item.id,
            countDownTime: 60,
            timer: null,
            countDownIng: false,
          })
        })
        yzDataList.value.forEach(item => {
          clearTimerForRobotId(item.id)
        })
        initCountDown(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
//设置分组
const addGroup = async () => {
  setGroupRef.value.showModal(selectedRowKey.value, 'LdleFish')
}

// 分组管理
const showGroupList = () => {
  groupListRef.value.showModal()
}
const selectRobat = (selectValue: unknown) => {
  okRobat.value = selectValue as string
  searchParams.value.robotId = selectValue as string
  clearTimerForRobotId(okRobat.value as string)
  initCountDown(selectValue as string)
  formState.status = 0
  searchParams.value.status = formState.status
  getList()
}

// 表格多选
const selectedRowKey = ref<Array<any>>([])
const selectedRow = ref<Array<object>>([])
const onSelectChange = (selectedRowKeys: any[], selectedRows: any[]) => {
  selectedRowKey.value = selectedRowKeys
  selectedRow.value = selectedRows
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

let allList = ref<Array<any>>([])
const getAll = async () => {
  try {
    let { state, data, message: msg } = await fishApi.getIndustryList()
    if (state === 200) {
      allList.value = data
      // console.log('allList=', allList.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await fishApi.getfishProductList(searchParams.value)
    if (state === 200) {
      data.list.forEach((item: { isPriceShow: boolean; isTitleShow: boolean }) => {
        item.isTitleShow = false
        item.isPriceShow = false
      })
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

const setStatus = async (record: any, status: any, kerword: any) => {
  let { id } = record
  let parmas = {
    productId: id,
    status: status,
  }
  try {
    let { state, data, message: msg } = await fishApi.setGoodsStatus(parmas)
    if (state === 200) {
      getList()
      message.success(`${kerword}` + '成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const yzData = reactive({
  countDownTime: 60,
  timer: null,
  countDownIng: false,
})
const STORAGE_KEY_PREFIX = 'SynchronizeProductTime-'
const resultYzData = ref({})
const yzDataList = ref([])
//获取验证码倒计时
const countDown = (robotId: any) => {
  let item: any = getCurrentItem(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let nowTime = new Date().getTime()

  if (startTime) {
    let surplus = 60 - parseInt((nowTime - parseInt(startTime)) / 1000, 10)
    item.countDownTime = surplus <= 0 ? 0 : surplus
  } else {
    item.countDownTime = 60
    localStorage.setItem(STORAGE_KEY_PREFIX + robotId, nowTime.toString())
  }

  item.timer = setInterval(() => {
    item.countDownTime--
    item.countDownIng = true
    if (item.countDownTime <= 0) {
      localStorage.removeItem(STORAGE_KEY_PREFIX + robotId)
      clearInterval(item.timer)
      item.countDownTime = 60
      item.countDownIng = false
    }
  }, 1000)
}

// 清除与指定robotId关联的定时器
const clearTimerForRobotId = (robotId: string) => {
  const item = yzDataList.value.find(item => item.id === robotId)
  if (item && item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}
const initCountDown = (robotId: any) => {
  clearTimerForRobotId(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let item: any = getCurrentItem(robotId)

  if (startTime) {
    item.countDownIng = true
    countDown(robotId)
  } else {
    resetItemCountDown(item)
  }
}
//获取默认的倒计时item
const getCurrentItem = (robotId: any) => {
  let item: any = yzDataList.value.find(item => item.id === robotId)
  if (!item) {
    item = reactive({ ...yzData, id: robotId }) // 使用新的ID创建一个新的倒计时对象
    yzDataList.value.push(item) // 添加到列表中，如果需要的话
  }
  resultYzData.value = item // 更新当前选中的倒计时对象
  return item
}
//重置倒计时的使劲按 清楚倒计时
const resetItemCountDown = (item: any) => {
  item.countDownTime = 60
  item.countDownIng = false
  if (item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}
const syncRobotProduct = async () => {
  let parmas = {
    robotId: okRobat.value,
  }
  try {
    let { state, data, message: msg } = await fishApi.synchronizationProduct(parmas)
    if (state === 200) {
      getList()
      message.success({
        content: '提交同步宝贝任务成功，请您稍等1-2分钟后刷新查看！',
        duration: 5,
      })
      countDown(okRobat.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

onMounted(() => {
  getAll()
  getGroupList()
  getRobatList()

  selectSorterTypeKey(sorterType.value[1].value)
  selectSorterKey(sorterList.value[2].value)
})

// 查询
const formRef = ref()
import type { SelectProps } from 'ant-design-vue'
import { number } from 'echarts'
const robotStateList = ref<SelectProps['options']>([
  {
    label: '上架',
    value: 0,
  },
  {
    label: '下架',
    value: -2,
  },
  {
    label: '删除',
    value: -1,
  },
  {
    label: '其他',
    value: 99,
  },
  {
    label: '售出',
    value: 1,
  },
])
const sorterList = ref<SelectProps['options']>([
  {
    label: '销量',
    value: 0,
  },
  {
    label: '库存',
    value: 1,
  },
  {
    label: '创建时间',
    value: 2,
  },
  {
    label: '曝光',
    value: 3,
  },
  {
    label: '想要',
    value: 4,
  },
  {
    label: '浏览',
    value: 5,
  },
])
const sorterType = ref<SelectProps['options']>([
  {
    label: '升序',
    value: 0,
  },
  {
    label: '降序',
    value: 1,
  },
])
let orderKey = ref<string>()
let sorterKey = ref<string>()

const selectSorterTypeKey = (selectValue: unknown) => {
  orderKey.value = selectValue as string

  if (selectValue == 0) {
    searchParams.value.order = true
  } else if (selectValue == 1) {
    searchParams.value.order = false
  }
}

const selectSorterKey = (selectValue: unknown) => {
  sorterKey.value = selectValue as string
  delete searchParams.value.salesCountSwitch
  delete searchParams.value.inventorySwitch
  delete searchParams.value.createTimeSwitch
  delete searchParams.value.exposureCountSwitch
  delete searchParams.value.wantCountSwitch
  delete searchParams.value.browseCountSwitch

  if (selectValue == 0) {
    searchParams.value.salesCountSwitch = true
  } else if (selectValue == 1) {
    searchParams.value.inventorySwitch = true
  } else if (selectValue == 2) {
    searchParams.value.createTimeSwitch = true
  } else if (selectValue == 3) {
    searchParams.value.exposureCountSwitch = true
  } else if (selectValue == 4) {
    searchParams.value.wantCountSwitch = true
  } else if (selectValue == 5) {
    searchParams.value.browseCountSwitch = true
  }
}
const groupList = ref([])
// 列表
const getGroupList = async () => {
  let api = fishGoodsApi.getFishGoodsList()

  // onlyType.value === 'wx'
  //   ? (api = fishGoodsApi.getFishGoodsList())
  //   : (api = fishGoodsApi.getFishRobotGroupList())

  try {
    let { state, data, message: msg } = await api
    if (state === 200) {
      // data.forEach((item: { isRemarkShow: boolean }) => {
      //   item.isRemarkShow = false
      // })
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

interface FormState {
  title?: string
  status?: string | number
  groupId?: string | number
  sorterKey?: string | number
  order?: boolean | number
}
const formState = reactive<FormState>({})
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value.title = formState.title || ''
    searchParams.value.status = formState.status
    searchParams.value.groupId = formState.groupId

    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.resetFields()
  Reflect.deleteProperty(searchParams.value, 'title')
  Reflect.deleteProperty(searchParams.value, 'status')
  Reflect.deleteProperty(searchParams.value, 'groupId')

  getList()
}

// 发布宝贝
const addNewProduct = () => {
  // router.push('/add-new-pro')
  addNewProModalRef.value.showModal()
}

const EditNewProduct = (record: any) => {
  // router.push({
  //   path: '/edit-new-pro',
  //   query: {
  //     id: record.id,
  //   },
  // })
  EditNewProModalRef.value.showModal(record.id)
}

const EditTitleSet = async (record: any) => {
  record.isTitleShow = true
}
const EditPriceSet = async (record: any) => {
  record.sellingPrice = toYuan(record.sellingPrice)
  record.isPriceShow = true
}

const handleEditData = async (record: any) => {
  record.isTitleShow = false
  let params = {
    productId: record.id,
    title: record.title,
    // sellingPrice: regYuanToFen(record.sellingPrice, 100),
  }
  try {
    const { state, message: msg } = await fishApi.EditawayProduct(params)
    if (state === 200) {
      message.success('保存成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const handleEditPriceData = async (record: any) => {
  let params = {
    productId: record.id,
    // title: record.title,
    sellingPrice: regYuanToFen(record.sellingPrice, 100),
  }
  try {
    const { state, message: msg } = await fishApi.EditawayProduct(params)
    if (state === 200) {
      message.success('保存成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

// 批量上架
const batchUp = async () => {
  loading.value = true
  let params = {
    productIds: selectedRowKey.value,
    status: 0,
  }
  try {
    let { state, message: msg } = await fishApi.batchEditProductStatus(params)
    if (state === 200) {
      message.success('任务已提交，请过1-3分钟后刷新查看')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 批量下架
const batchDown = async () => {
  loading.value = true
  let params = {
    productIds: selectedRowKey.value,
    status: -2,
  }
  try {
    let { state, message: msg } = await fishApi.batchEditProductStatus(params)
    if (state === 200) {
      message.success('任务已提交，请过1-3分钟后刷新查看')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 批量改价
const batchPrice = () => {
  batchEditPriceRef.value.showModal(selectedRowKey.value)
}

// 翻译-行业、类目、渠道
const translate = (id: string) => {
  let obj = allList.value.find(item => item.channelCatId == id)
  // console.log('obj=', obj)
  if (obj && obj.industryName) {
    return obj
  } else {
    return {
      industryName: '-',
      categoryName: '-',
      channelName: '-',
    }
  }
}

// 导出表格
let exportExcelLoading = ref<boolean>(false)
const exportExcel = async () => {
  try {
    exportExcelLoading.value = true
    let { state, data, message: msg } = await fishApi.fishProductExcelOut(searchParams.value)
    // console.log('data=', data)
    let blob = new Blob([data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    let file = new File([blob], `闲鱼宝贝-${getNowDay()}.xlsx`, {
      lastModified: new Date() as any,
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    // console.log('file=', file)
    const a = document.createElement('a')
    a.style.display = 'none'
    document.body.appendChild(a)
    const url = URL.createObjectURL(file)
    a.href = url
    a.download = file.name
    a.click()
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  exportExcelLoading.value = false
}

const advancedSearch = () => {
  searchDrawerRef.value.showDrawer()
}
</script>

<template>
  <!-- <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll"> -->
  <!-- <div style="margin: 5px 0; text-align: right">
        <span>选择闲鱼账号：</span>
        <a-select v-model:value="okRobat" @change="selectRobat" placeholder="请选择" style="width: 150px; text-align: left"
          allowClear show-search :options="optionList" :filter-option="filterOption">
          <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </div> -->

  <div class="searchBox">
    <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
      <a-form-item label="闲鱼账号" name="title">
        <a-select
          v-model:value="okRobat"
          @change="selectRobat"
          placeholder="请选择"
          style="width: 200px; text-align: left"
          allowClear
          show-search
          :options="optionList"
          :filter-option="filterOption"
        >
          <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="宝贝状态" name="status">
        <a-select
          v-model:value="formState.status"
          placeholder="请选择"
          allowClear
          style="width: 200px"
        >
          <a-select-option v-for="(item, index) in robotStateList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <SearchDrawer ref="searchDrawerRef">
        <div>
          <a-form-item label="宝贝标题" name="title">
            <a-input v-model:value="formState.title" placeholder="宝贝标题" style="width: 250px" />
          </a-form-item>

          <a-form-item label="宝贝状态" name="status">
            <a-select
              v-model:value="formState.status"
              placeholder="请选择"
              allowClear
              style="width: 250px"
            >
              <a-select-option
                v-for="(item, index) in robotStateList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="宝贝排序" name="sorterKey">
            <a-select
              v-model:value="sorterKey"
              @change="selectSorterKey"
              placeholder="请选择"
              allowClear
              style="width: 250px"
            >
              <a-select-option v-for="(item, index) in sorterList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="排序方式" name="orderKey">
            <a-select
              v-model:value="orderKey"
              @change="selectSorterTypeKey"
              placeholder="请选择"
              allowClear
              style="width: 250px"
            >
              <a-select-option v-for="(item, index) in sorterType" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="分组查询" name="groupId">
            <a-select
              v-model:value="formState.groupId"
              placeholder="请选择"
              allowClear
              style="width: 250px"
            >
              <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
                {{ item.groupName }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item style="text-align: right">
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button @click="reset" style="margin-left: 10px">重置</a-button>
          </a-form-item>
        </div>
      </SearchDrawer>

      <a-form-item>
        <a-button type="primary" @click="search">搜索</a-button>
        <a-button @click="reset">重置</a-button>
        <a-button type="primary" @click="advancedSearch">高级搜索</a-button>
      </a-form-item>

      <a-form-item>
        <a-button @click="addNewProduct" danger>
          <template #icon>
            <PlusCircleOutlined />
          </template>
          发布宝贝
        </a-button>
      </a-form-item>

      <a-form-item>
        <a-button
          type="primary"
          @click="syncRobotProduct"
          :disabled="resultYzData.countDownIng || okRobat == 1"
        >
          {{
            resultYzData.countDownIng
              ? `同步当前闲鱼账号宝贝 ${resultYzData.countDownTime}`
              : '同步当前闲鱼账号宝贝'
          }}
        </a-button>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" style="margin-right: 6px" @click="showGroupList">
          分组管理
        </a-button>
      </a-form-item>

      <a-form-item>
        <a-button :loading="exportExcelLoading" :disabled="true" @click="exportExcel">
          <template #icon>
            <VerticalAlignBottomOutlined />
          </template>
          导出近七天
        </a-button>
      </a-form-item>
    </a-form>
  </div>

  <div style="margin: 5px 0">
    <a-dropdown v-if="selectedRowKey.length > 0">
      <a-button>
        批量操作
        <DownOutlined />
      </a-button>
      <template #overlay>
        <a-menu>
          <a-menu-item @click="batchUp">批量上架</a-menu-item>
          <a-menu-item @click="batchDown">批量下架</a-menu-item>
          <a-menu-item @click="batchPrice">批量改价</a-menu-item>
          <a-menu-item @click="addGroup">设置分组</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>

  <a-alert
    description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
    type="info"
    banner
    style="margin-bottom: 10px; padding: 10px"
  />

  <a-table
    style="overflow-x: scroll"
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="changePage"
    rowKey="id"
    :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
    size="small"
    :scroll="{ x: 100 }"
  >
    <template #emptyText>
      <a-empty description="暂无数据" />
    </template>

    <template #headerCell="{ column }">
      <template v-if="column.key === 'id'">
        <span>id</span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'imgList'">
        <div>
          <img style="width: 80px" :src="record.imgList[0]" alt="" />
        </div>
      </template>

      <template v-else-if="column.key === 'title'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '120px' }">
          <a-descriptions-item label="宝贝标题">
            <div style="display: flex; align-items: center">
              <a-tooltip placement="top" v-if="!record.isTitleShow">
                <template #title>
                  <span>{{ record.title }}</span>
                </template>
                <span class="hiddenText">{{ record.title }}</span>
              </a-tooltip>
              <a-input
                v-else
                v-model:value="record.title"
                @blur="handleEditData(record)"
                style="border: 0"
              />
              <EditOutlined
                @click="EditTitleSet(record)"
                v-if="!record.isTitleShow"
                style="margin-left: 6px; color: #1890ff"
              />
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="宝贝描述">
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.desc }}</span>
              </template>
              <span class="hiddenText">{{ record.desc || '无' }}</span>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item label="宝贝状态">
            <a-tag color="blue" v-if="record.status == 0">上架</a-tag>
            <a-tag color="red" v-else-if="record.status == -1">删除</a-tag>
            <a-tag color="red" v-else-if="record.status == -2">下架</a-tag>
            <a-tag color="red" v-else-if="record.status == 1">售出</a-tag>
            <a-tag color="red" v-else-if="record.status == -11">未认证</a-tag>
            <a-tag color="red" v-else-if="record.status == 99">其他</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="宝贝来源">{{ record.sourceName }}</a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'exposure'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="曝光">
            {{ record.exposure }}
          </a-descriptions-item>
          <a-descriptions-item label="浏览">
            {{ record.browse }}
          </a-descriptions-item>
          <a-descriptions-item label="想要">
            {{ record.want }}
          </a-descriptions-item>
          <a-descriptions-item label="销量">
            {{ record.salesCount }}
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'channelId'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="行业">
            {{ translate(record.channelId)['industryName'] }}
          </a-descriptions-item>
          <a-descriptions-item label="类目">
            {{ translate(record.channelId)['categoryName'] }}
          </a-descriptions-item>
          <a-descriptions-item label="渠道">
            {{ translate(record.channelId)['channelName'] }}
          </a-descriptions-item>
          <a-descriptions-item label="分组">
            {{ record.groupName || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'originalPrice'">
        <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
          <a-descriptions-item label="原价">
            ￥{{ toYuan(record.originalPrice) }}
          </a-descriptions-item>
          <a-descriptions-item label="售价">
            <div style="display: flex; align-items: center">
              <span v-if="!record.isPriceShow">￥{{ toYuan(record.sellingPrice) }}</span>
              <a-input
                v-else
                v-model:value="record.sellingPrice"
                @blur="handleEditPriceData(record)"
                style="border: 0"
              />
              <div>
                <EditOutlined
                  @click="EditPriceSet(record)"
                  v-if="!record.isPriceShow"
                  style="margin-left: 6px; color: #1890ff"
                />
              </div>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="邮费">
            {{ record.transportFee }}
          </a-descriptions-item>
          <a-descriptions-item label="库存">
            {{ record.inventory }}
          </a-descriptions-item>
        </a-descriptions>
      </template>

      <template v-else-if="column.key === 'createTime'">
        <div style="color: red; width: 180px">{{ timeFormat_2(record.createTime) }}</div>
      </template>

      <template v-else-if="column.key === 'action'">
        <div style="display: inline-block; width: 120px">
          <a-popconfirm
            title="您确认要上架吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="setStatus(record, 0, '上架')"
            :disabled="record.status == -1 || !record.spBizType || record.status == 99"
          >
            <a-button
              style="padding: 0; margin: 0; margin-left: 5px"
              type="link"
              v-if="record.status == -2 || record.status == 1"
              :disabled="record.status == -1 || !record.spBizType || record.status == 99"
            >
              上架宝贝
            </a-button>
          </a-popconfirm>

          <a-popconfirm
            title="您确认要下架吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="setStatus(record, -2, '下架')"
            :disabled="record.status == -1 || !record.spBizType || record.status == 99"
          >
            <a-button
              type="link"
              style="padding: 0; margin: 0; margin-left: 5px"
              v-if="record.status == 0"
              :disabled="record.status == -1 || !record.spBizType || record.status == 99"
            >
              下架宝贝
            </a-button>
          </a-popconfirm>

          <a-button
            style="padding: 0; margin: 0; margin-left: 5px"
            type="link"
            @click="EditNewProduct(record)"
            :title="!record.spBizType ? '外部宝贝或状态不支持修改' : ''"
            :disabled="!record.spBizType || record.status == -1 || record.status == 99"
          >
            编辑宝贝
          </a-button>
        </div>
      </template>
    </template>
  </a-table>
  <SetGroup ref="setGroupRef" @refresh="getList"></SetGroup>
  <BatchEditPrice ref="batchEditPriceRef"></BatchEditPrice>
  <GroupList ref="groupListRef" @onRefreshList="getGroupList"></GroupList>

  <AddNewProModal ref="addNewProModalRef" @refresh="search"></AddNewProModal>
  <EditNewProModal ref="EditNewProModalRef" @refresh="search"></EditNewProModal>
  <!-- </a-card>
  </page-container> -->
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.formClass {
  :nth-child(1) {
    // margin-bottom: 2px;
  }
}

.searchBox {
  // margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

.setting-box {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 6px;
}

a:hover {
  color: red;
}

.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}
</style>
